<template>
  <div class="register-vessel">

    <div class="register-banner-box">
      <span class="welcome-text" @click="toIndex">蓝聘，欢迎你</span>
      <span class="join-text">WELCOME TO JOIN US</span>
      <div class="banner-text">
        <span @click="toLogin">登录</span>&nbsp;&nbsp;|&nbsp;&nbsp;<span class="register-text">注册</span>
      </div>
    </div>

    <div class="register-box">

      <div class="register-con">

        <div class="register-user-phone">
          <span class="user-input-text">手机号：</span>
          <input type="text" placeholder="请输入手机号" class="user-input-con" maxlength="11" v-model="phone"/>
        </div>

        <div class="register-user-verify">
          <span class="user-input-text">验证码：</span>
          <input type="text" placeholder="请输入验证码" class="user-input-code" maxlength="6" v-model="code"/>
          <verify-code ref="timerBtn" class="user-gain-code" v-on:run="sendCode"></verify-code>
        </div>

        <div class="register-user-pwd">
          <span class="user-input-text">密码：</span>
          <input type="password" placeholder="请设置6-16位登录密码" class="user-input-con" maxlength="16" v-model="pwd1"/>
        </div>

        <div class="register-user-pwd">
          <span class="user-input-text">确认密码：</span>
          <input type="password" placeholder="请再次输入密码" class="user-input-con" maxlength="16" v-model="pwd2"/>
        </div>

        <button type="button" class="register-user-btn" @click="registerUser">注册</button>
      </div>

    </div>

    <service></service>

    <div class="register-back-box" @click="toIndex">
      <img src="../../images/back_icon.png" class="register-back-pic"/>
      <span class="back-text">返回首页</span>
    </div>
  </div>
</template>

<script>
  import verifyCode from "../../components/verifyCode";
  import md5 from 'js-md5';
  import {affirmPwd, checkCode, checkPhone, checkPwd} from "../../config/verify";
  import {Loading} from 'element-ui';
  import {baseUrl} from "../../config/env";
  import service from "../../components/service";

  export default {
    data() {
      return {
        phone: "",
        code: "",
        pwd1: "",
        pwd2: "",
        token1: "",
        token2: ""
      }
    },
    methods: {
      toLogin() {
        this.$router.push("/login");
      },
      sendCode() {//获取验证码
        let phone = this.phone;
        if (checkPhone(phone)) {
          this.$refs.timerBtn.setDisabled(true);
          this.axios.get(baseUrl + "/login/get_token?phone=" + phone + "&i=0").then((res) => {
            this.token1 = res.data.data;
            this.axios.get(baseUrl + "/login/send_code?phone=" + phone + "&i=0" + "&userToken=" + this.token1).then((res) => {
              let retObj = res.data;
              if (retObj.code == 0) {
                this.token2 = retObj.data;
                this.$refs.timerBtn.setDisabled(true);//设置按钮不可用
                this.$refs.timerBtn.start(); //启动倒计时
              } else {
                this.$refs.timerBtn.stop();
                this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
              }
            });
          }).catch(() => {
            this.$message({message: "网络异常", center: true, type: 'error', duration: 1000});
          });
        }
      },
      registerUser() {
        let phone = this.phone;
        let pwd = this.pwd1;
        let code = this.code;
        if (checkPhone(phone) && checkCode(code) && checkPwd(pwd, 2) && affirmPwd(pwd, this.pwd2)) {
          let loading = Loading.service({
            text: '拼命加载中....',
            lock: false,
            background: 'rgba(0, 0, 0, 0.7)'
          });
          this.axios.get(baseUrl + "/login/mate_code?phone=" + phone + "&i=0&code=" + code + "&token=" + this.token2).then((res) => {
            let retObj = res.data;
            if (retObj.code == 0) {
              let data = {
                "phone": phone,
                "password": md5(pwd),
                "type": 0
              };

              this.axios.post(baseUrl + "/login/add_user", data).then((res) => {//注册
                loading.close();
                let retObj = res.data;
                if (retObj.code == 0 && retObj.data == 0) {
                  this.$router.push("/login");
                } else {
                  this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
                }
              });
            } else {
              loading.close();
              this.$message({message: retObj.msg, center: true, type: 'error', duration: 1000});
            }
          });
        }
      },
      toIndex() {
        this.$router.push("/index");
      }
    },
    components: {
      verifyCode,
      service
    }
  }
</script>

<style lang="less" scoped>
  @import "../../assets/mixin";

  .register-vessel {
    .wh(100%, 100%);
    .register-banner-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(100%, 240px);
      .bg-image("../page/user/login_banner.png");
      .welcome-text {
        .size-color(36px, #FFF);
        padding-top: 74px;
        padding-bottom: 13px;
        &:hover{
          cursor: pointer;
        }
      }
      .join-text {
        padding-bottom: 62px;
        font-size: 18px;
        color: rgba(255, 255, 255, 0.6);
      }
      .banner-text {
        .size-color(24px, #FFF);
        cursor: pointer;
        .register-text {
          color: #2274E6;
        }
      }
    }
    .register-box {
      .wh(100%, auto);
      display: flex;
      justify-content: center;
      .register-con {
        padding-top: 65px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 464px;
        .register-user-phone {
          display: flex;
          align-items: center;
          padding-bottom: 36px;
        }
        .register-user-verify {
          display: flex;
          align-items: center;
          padding-bottom: 36px;
          .user-input-code {
            .wh(202px, 48px);
            background: rgba(245, 245, 245, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            border-radius: 4px;
            padding-left: 18px;
          }
          .user-gain-code {
            .wh(120px, 48px);
            background: rgba(60, 175, 255, 1);
            border-radius: 4px;
            .size-color(16px, #FFF);
            margin-left: 19px;
          }
        }
        .register-user-pwd {
          display: flex;
          align-items: center;
          padding-bottom: 28px;
        }
        .user-input-text {
          width: 90px;
          text-align: right;
          .size-color(18px, #4D4D4D);
        }
        .user-input-con {
          .wh(342px, 48px);
          background: rgba(245, 245, 245, 1);
          border: 1px solid rgba(235, 235, 235, 1);
          border-radius: 4px;
          padding-left: 18px;
        }
        .register-user-btn {
          .wh(180px, 48px);
          background: #3CAFFF;
          border-radius: 4px;
          .size-color(16px, #FFFFFF);
          text-align: center;
          line-height: 48px;
          &:hover {
            cursor: pointer;
            background: #39A2ED;
          }
        }
      }
    }
    .register-server-pic {
      position: absolute;
      bottom: 20px;
      right: 20px;
      .wh(72px, 72px);
      .server-pic {
        .wh(72px, 72px);
      }
    }
    .register-back-box {
      position: absolute;
      top: 25px;
      left: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .register-back-pic {
        .wh(16px, 16px)
      }
      .back-text {
        padding-left: 10px;
        .size-color(16px, #FFF)
      }
    }
  }
</style>
